<template>
  <div class="container">
    <div class="header">
      <!-- 选择 prop 格式的选择器 -->
      <el-select v-model="propFormat" placeholder="prop 格式" @change="generateVueCode"
                 style=" width: 120px;" size="mini"
      >
        <el-option label="下划线" value="underscore"></el-option>
        <el-option label="小驼峰" value="camelCase"></el-option>
        <el-option label="大驼峰" value="PascalCase"></el-option>
      </el-select>

      <div style="display: inline-block">
        <el-button
            type="default"
            @click="addOption('show-overflow-tooltip')"
            :style="getButtonStyle('show-overflow-tooltip')"
            style="margin-left: 10px;"
            size="mini"
        >
          show-overflow-tooltip
        </el-button>
        <el-button
            type="default"
            @click="addOption('align')"
            :style="getButtonStyle('align')"
            size="mini"

        >
          align
        </el-button>
      </div>
    </div>
    <div class="content">

      <!--输入框-->
      <div class="left">
        <el-input
            type="textarea"
            v-model="sqlInput"
            placeholder="请输入 SQL 创建表语句..."
            rows="17"
            style="width: 100%; font-family: monospace; font-size: 14px"
        ></el-input>
      </div>

      <!--      输出框-->
      <div class="right">
        <el-button type="text" size="mini"
                   @click="copyToClipboard"
                   style="margin-right: 22px;
    float: right;">复制
        </el-button>
        <el-input
            type="textarea"
            v-model="generatedCode"
            readonly
            rows="17"
            class="right-textarea"
            style="width: 100%; font-family: monospace; font-size: 14px;"
        ></el-input>

      </div>
    </div>

    <div class="btn">
      <!-- 转换按钮 -->
      <el-button
          type="primary"
          @click="extractFields"
          size="mini"
          style="margin-top: 20px; background-color: black; color: white;border-radius: 10px;"
      >
        转换
      </el-button>
    </div>

  </div>
</template>

<script>
export default {
  name: "viewPort",

  data() {
    return {
      sqlInput: "", // 输入的 SQL 创建表语句
      fields: [], // 存储提取的字段和注释
      generatedCode: "", // 存储生成的 Vue 代码
      propFormat: "", // prop 格式选项，默认为下划线
      selectedOptions: [], // 允许多选的属性选项数组
    };
  },

  mounted() {
    // 页面加载时从本地存储加载已保存的数据
    const storedCode = localStorage.getItem('generatedCode');
    if (storedCode) {
      this.generatedCode = storedCode;
    }
  },

  methods: {
    // 提取 SQL 创建表语句中的字段和注释
    extractFields() {
      const regex = /`(.*?)`\s+.*?COMMENT\s+'(.*?)'/g;
      let match;
      const extractedFields = [];

      while ((match = regex.exec(this.sqlInput)) !== null) {
        extractedFields.push({
          field: match[1], // 字段名
          comment: match[2], // 注释内容
        });
      }
      this.fields = extractedFields;
      console.log(extractedFields);
      this.generateVueCode(); // 提取字段后重新生成 Vue 代码
    },

    // 根据提取出来的字段和注释生成 Vue 代码
    generateVueCode() {
      let code = '';
      this.fields.forEach((item) => {
        // 根据选中的格式转换 prop 名称
        let formattedProp = this.formatProp(item.field);

        let additionalProps = '';
        this.selectedOptions.forEach((option) => {
          if (option === "show-overflow-tooltip") {
            additionalProps += ' show-overflow-tooltip';
          } else if (option === "align") {
            additionalProps += ` align="center"`;
          }
        });

        code += `<el-table-column prop="${formattedProp}" label="${item.comment}"${additionalProps} />\n`;
      });
      this.generatedCode = code;

      // 存储到本地存储
      localStorage.setItem('generatedCode', this.generatedCode);
    },

    // 添加选中的属性到 selectedOptions 数组
    // addOption(option) {
    //     if (!this.selectedOptions.includes(option)) {
    //         this.selectedOptions.push(option);
    //         console.log(this.selectedOptions)
    //     }
    //     this.generateVueCode(); // 更新代码
    // },

    // 获取按钮的样式
    getButtonStyle(option) {
      return this.selectedOptions.includes(option) ?
          {backgroundColor: '#409EFF', color: 'white'} :
          {backgroundColor: '', color: ''};
    },

    addOption(option) {
      const index = this.selectedOptions.indexOf(option);
      if (index === -1) {
        // 如果没有选中该选项，添加它
        this.selectedOptions.push(option);
      } else {
        // 如果已经选中该选项，删除它
        this.selectedOptions.splice(index, 1);
      }
      console.log(this.selectedOptions)

      this.generateVueCode(); // 更新代码
    },

    // 格式化 prop 名称
    formatProp(prop) {
      switch (this.propFormat) {
        case "underscore":
          return this.toUnderscore(prop);
        case "camelCase":
          return this.toCamelCase(prop);
        case "PascalCase":
          return this.toPascalCase(prop);
        default:
          return prop;
      }
    },

    // 下划线格式（snake_case）
    toUnderscore(str) {
      return str.replace(/[A-Z]/g, (match) => `_${match.toLowerCase()}`);
    },

    // 小驼峰格式（camelCase）
    toCamelCase(str) {
      return str.replace(/_([a-z])/g, (match, letter) => letter.toUpperCase());
    },

    // 大驼峰格式（PascalCase）
    toPascalCase(str) {
      const camelCase = str.replace(/_([a-z])/g, (match, letter) => letter.toUpperCase());
      return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
    },

    // 复制生成的代码到剪贴板
    copyToClipboard() {
      const textArea = document.createElement("textarea");
      textArea.value = this.generatedCode;
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand("copy");
      document.body.removeChild(textArea);
      this.$message.success("代码已复制到剪贴板！");
    },
  },
};
</script>

<style scoped>
.container {
  min-height: 100vh;
  width: 100%;
  height: 100%;
}

.content {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: center;
}

.content .left,
.content .right {
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  width: 600px;


}

.btn {
  width: 100%;
  display: flex;
  justify-content: center

}

.header {
  display: flex;
  justify-content: flex-end;
  align-content: center
}

/deep/ .right-textarea .el-textarea__inner {
  background-color: #f0f0f0;
}

/deep/ .el-textarea__inner {
  font-weight: 700;
  font-size: 17px;

}


</style>
